<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/app/styles/base.css">
<link rel="stylesheet" href="/common/css/slider/slider.css">
<link rel="stylesheet" href="/common/css/slider/slider.default.css">
<link rel="stylesheet" href="/common/css/zmu.css">
<link rel="stylesheet" href="/app/styles/leader.css">

<script type="text/javascript" src="/common/js/zepto.js"></script>
<script type="text/javascript" src="/common/js/zmu.js"></script>
<script type="text/javascript" src="/common/js/slider/slider.js"></script>
<script type="text/javascript" src="/common/js/slider/dots.js"></script>
<script type="text/javascript" src="/common/js/slider/$touch.js"></script>
<script type="text/javascript" src="/common/js/slider/$autoplay.js"></script>
<script type="text/javascript" src="/common/js/slider/$lazyloadimg.js"></script>
<script type="text/javascript" src="/app/scripts/common_lib.js"></script>

<style type="text/css">
.img-loading {
	width:35px;
	height:35px;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 5px;
}

.div-product {
	width: 100%;
	max-width: 300px;
	height: 135px;
	background-color: white;
	margin: 0 auto;
	margin-top: 8px;
	text-align: left;
	font-size: 12px;
}

.div-image {
	width: 60%;
	height: 100%;
	float: left;
}

.div-name {
	width: 40%;
	height: 30%;
	float: right;
}

.p-name {
	color: #ff3f40;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 7px;
	font-size: 14px;
}
.p-description {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 0px;
	font-size: 14px;
}

.p-image {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 7px;
}

.div-description {
	width: 40%;
	height: 60%;
	float: right;
}

.img-product {
	width: 100%;
	height: 100%;
}

.m-logo{
	width: 300px;
	margin: 0 auto;
}

.topBtn {
	position: absolute;
	right: 0;
	top: 0;
}
/*
.topBtn a{ display: block; width: 60%; height: 24px; line-height: 24px; margin: 0 auto; border: #c2c2c2 solid 1px; background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ededed));}
*/

.topBtn a {
	font-size:12px;
	padding:3px 8px;
	margin:3px; border: #c2c2c2 solid 1px; background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#ededed));
}

.div-category {
	background: #fff;
	margin-top: 5px;
	display: none;
}
.div-brand {
	background: #fff;
	margin-top: 5px;
	display: none;
}

.search-icon{ position: fixed; bottom: 50px; right:3px;; width: 40px;height:40px; z-index: 999;background: transparent;border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
.search-icon button {
	width: 100%;
	height: 100%;
	background: url(/app/images/icon.png) -33px -110px no-repeat transparent;
	background-size: 175px 150px;
	border: 0;
}


.div-search-dialog {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	display: none;
}

.div-search-dialog-bg{
	width: 100%;
	height: 100%;
	background-color: #222222;
	position: absolute;
	opacity: .8;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
	-khtml-opacity: .8;
}

.div-search-box {
	position:absolute;
	width: 100%;
	top: 25%;
	background-color: #FFF;
	border-radius: 8px 0 8px 8px; -moz-border-radius: 8px 0 8px 8px; -webkit-border-radius: 8px 0 8px 8px;
	height: 100px;
	z-index: 100;
}

.div-search-box .close-search-icon {
	width: 18px;
	height: 18px;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	border-bottom-left-radius: 1.25em;
	background: url(/app/images/close.png) no-repeat 65% 35% #ff3f40;
	background-size: 7px auto;
	opacity: 0.95;
}

</style>
</head>

  	<body>
		<header style="display: none;">
			<div class="titleWrap">
				<a href="javascript:void(0)" onclick="window.history.back();" class="a-back">
					<span class="cheek1">返回</span>
				</a>
				搜索列表
				<a href="javascript:scroll(0,0);" class="a-screen">
					<span class="cheek1">筛选</span>
				</a>
			</div>
		</header>
		<div class="m-logo">
			<h1>
				<img src="/mobile/images/logo3.png" width="80" height="30"/>
			</h1>
			<div class="topBtn">
				<span style="width: 80px;vertical-align: middle;line-height: 40px;font-size: 16px;">
					<a href="/mobile/login.html">登录</a>
					<a href="/mobile/register.html">注册</a>
				</span>
			</div>
		</div>
		<div class="m-zp" style="margin-top: 0px; margin-bottom: 0px;">
			<div id="slider" class="ui-slider">
				<div>
					<a href="/mobile/about.html"><img
						lazyload='/mobile/images/htjx_slider1.jpg'
						width="300" height='131'></a>
				</div>
				<!--  
				<div>
					<a href="/mobile/index.html?catagory=2014091600000001"><img
						lazyload='/mobile/images/htjx_slider4.jpg'
						width="300" height='131'></a>
				</div>
				-->
				<div>
					<a href="javascript:;"><img
						lazyload='/mobile/images/htjx_slider6.jpg'
						width="300" height='131'></a>
				</div>
			</div>
		
			<script>
				$('#slider').slider({
					loop : true
				});
			</script>
			<div class="navigate" style="display: none;">
				<a class="serv1" href="javascript:;" onclick="showCategory()">
					<span class="icon">
						<span></span>
					</span>
					<span class="text">选择分类:
						<span id="span-category">全部</span>
					</span>
				</a>
				<a class="serv2" href="javascript:;" onclick="showBrand()">
					<span class="icon">
						<span></span>
					</span>
					<span class="text">选择品牌:
						<span id="span-brand">全部</span>
					</span>
				</a>
				<a class="serv3" href="javascript:;" onclick="selectProduct()" style="display: none;">
					<span class="icon">
						<span></span>
					</span>
					<span>查找商品</span>
				</a>
			</div>
			<div class="select-box">
				<div class="select-mask">
					<div class="select-tip">
						<span>选择品牌:</span>
					</div>
					<div class="select-content">
						<span id="current-brand">全部</span>
					</div>
					<div class="select-icon">
						<span></span>
					</div>
					<select id="select-brand" onchange="changeBrand(this)">
						<option value="0" selected="selected">全部</option>
					</select>
				</div>
			</div>
			
			<div class="select-box">
				<div class="select-mask">
					<div class="select-tip">
						<span>选择类别:</span>
					</div>
					<div class="select-content">
						<span id="current-category">全部</span>
					</div>
					<div class="select-icon">
						<span></span>
					</div>
					<select id="select-category" onchange="changeCategory(this)">
						<option value="0" selected="selected">全部</option>
					</select>
				</div>
			</div>
			
			
			<div class="div-category">
				<table class = "table-leader" id="category" border="0" cellspacing="0" cellpadding="0">
				</table>
			</div>
			<div class="div-brand">
				<table class = "table-leader" id="brand" border="0" cellspacing="0" cellpadding="0">
				</table>
			</div>
			
			<div class="listing">
				<ul class="lis-list radius">
					<li>
						<a href="javascript:;" class="lis-list-a">
							<dl class="clearfix">
								<dd></dd>
								<dt></dt>
							</dl>
						</a>
					</li>
				</ul>
				<div class="paging">
					<div class="pag-tbl">
						<div class="pag-cell">
							<a class="a-prve" href="javascript:;" onclick="prevPage()">上一页</a>
						</div>
						<div class="pag-cell">
							<a href="javascript:void(0)" class="a-page">
								<span><label id="current-page">1</label>/<label id="total-page">999</label></span>
							</a>
							<select class="pag-select" id="yema" onchange="selectProductByPage()">
							</select>
						</div>
						<div class="pag-cell">
							<a class="a-next" href="javascript:;" onclick="nextPage()">下一页</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="content" style="margin-top: 0px;padding-top: 0px;display: none;">
			<form id="form-category" >
				<input type="hidden" name = "category_id" id="input-category" value="0"/>
				<input type="hidden" name = "brand_id" id="input-brand" value="0"/>
				<input type="hidden" name = "page_no" id="page_no" value="1"/>
				<input type="hidden" name = "page_size" id="page_size" value="8"/>
				<input type="hidden" name = "page_count" id="page_count" value="-1"/>
				<input type="hidden" name = "key_word" id="key_word" value=""/>
			</form>
			<div class="m-zp">
				<div id="div-product-list">
					
				</div>
				
			</div>
		</div>
		<footer>
			<div class="footerWrap">
			</div>
		</footer>
		<div style="height: 50px;"></div>
		
		<div class="bottom">
			<div class="bottomWrap">
			</div>
		</div>
		
		<div class="search-icon">
			<button onclick="toggleSearchDialog()"></button>
		</div>
		
		<div class="div-search-dialog">
			<div class="div-search-box">
				<div class="close-search-icon" onclick="toggleSearchDialog()"></div>
				<div class="search">
					<div class="search-input"><div class="ui-suggestion-mask"><input type="text" id="input" name="wd" placeholder="请输入关键字" autocomplete="off"><div class="ui-suggestion" id="ui-suggestion-0" style="top: 39px;"><div class="ui-suggestion-content" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); overflow: hidden;"><div class="ui-suggestion-scroller" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px);"></div></div><div class="ui-suggestion-button"><span class="ui-suggestion-clear" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);">清除历史记录</span><span class="ui-suggestion-close" style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0);">关闭</span></div></div><div class="ui-suggestion-quickdel"></div></div></div>
					<div class="search-button"><button class="submit" onclick="searchProductByKeyWord()">搜索</button></div>
				</div>
			</div>
			<div class="div-search-dialog-bg"></div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
			cjl.setPageCommon();
			cjl.getTitle();
			initPage();
		});
		
		function initPage() {
			getCategory();			
			getBrand();
			getProductByPage();
		}
		
		function getCategory() {
			var url = "/common/catagory";
			var params = '';
			cjl.get(url, params, function(body) {
				var list = body;
				var category = $("#input-category").val();
				var length = list.length;
				
				var num = Math.ceil((length+1)/3) * 3;
				
				var html = '';
				for (var i = 0; i < num; i++) {
					if(i % 3 == 0) {
						html += '<tr>';
					}
					
					if(i == 0){
						html += '<td class="menu3" id="category-'+i+'" onclick="toCatagory('+i+',\'全部\')">全部</td>';
					} else if(i <= length){
						var common_bean = list[i-1];
						
						if(category == common_bean.id) {
							html += '<td class="menu1" id="category-'+common_bean.id+'" onclick="toCatagory('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
						} else {
							if((i+1) % 3 == 0 || (i+1)==length) {
								html += '<td class="menu3" id="category-'+common_bean.id+'" onclick="toCatagory('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
							} else {
								html += '<td class="menu3" id="category-'+common_bean.id+'" onclick="toCatagory('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
							}
						}
					} else {
						html += '<td class="menu3"></td>';
					}
					
					if((i+1) % 3 == 0) {
						html += '</tr>';
					}
				}
				$("#category").html(html);
				
				for(var i in list) {
					var common_bean = list[i];
					var html = '';
					if(category == common_bean.id) {
						html += '<option value="'+common_bean.id+'" selected="selected">'+common_bean.name+'</option>';
					} else {
						html += '<option value="'+common_bean.id+'">'+common_bean.name+'</option>';
					}
					$("#select-category").append(html);
				}
			});
		}
		
		function getBrand() {
			var url = "/common/brand";
			var params = '';
			cjl.get(url, params, function(body) {
				var list = body;
				
				var brand = $("#input-brand").val();
				var length = list.length;
				var num = Math.ceil((length+1)/3) * 3;
				
				var html = '';
				for (var i = 0; i < num; i++) {
					
					if(i % 3 == 0) {
						html += '<tr>';
					}
					
					if(i == 0){
						html += '<td class="menu2" id="brand-'+i+'" onclick="toBrand('+i+',\'全部\')">全部</td>';
					} else if(i <= length){
						var common_bean = list[i-1];
						if(brand == common_bean.id) {
							html += '<td class="menu2" id="brand-'+common_bean.id+'" onclick="toBrand('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
						} else {
							if((i+1) % 3 == 0 || (i+1)==length) {
								html += '<td class="menu3" id="brand-'+common_bean.id+'" onclick="toBrand('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
							} else {
								html += '<td class="menu3" id="brand-'+common_bean.id+'" onclick="toBrand('+common_bean.id+',\''+common_bean.name+'\')">'+common_bean.name+'</td>';
							}
						}
					} else {
						html += '<td class="menu3"></td>';
					}
					
					if((i+1) % 3 == 0) {
						html += '</tr>';
					}
				}
				$("#brand").html(html);
				
				for(var i in list) {
					var common_bean = list[i];
					var html = '';
					if(category == common_bean.id) {
						html += '<option value="'+common_bean.id+'" selected="selected">'+common_bean.cn_name +'&nbsp;('+ common_bean.name+')</option>';
					} else {
						html += '<option value="'+common_bean.id+'">'+common_bean.cn_name +'&nbsp;('+ common_bean.name+')</option>';
					}
					$("#select-brand").append(html);
				}
			});
		}
		
		function getProductByPage() {
			$("#select-category").attr("disabled",true);
			$("#select-brand").attr("disabled",true);
			var $product_list = $('.lis-list');
			$product_list.empty();
			$product_list.html('<li><img class = "img-loading" src="/mobile/images/loading3.gif" /></li>');
			var url = "/product/list";
			var params = $("#form-category").serialize();

			cjl.get(url, params, function(page) {
				$("#select-category").removeAttr("disabled");
				$("#select-brand").removeAttr("disabled");
				$product_list.empty();
				var totalCount = page.totalCount;
				var list = page.result;
				
				if(totalCount == 0) {
					var html = '';
					html += '<li>';
					html += '<p style="text-align:center;padding:10px;">您查找的商品不存在，请重新查找</p>';
					html += '</li>';
					$product_list.append(html);
					$("#total-page").text(0);
					$("#current-page").text(0);
					return;
				} else {
					var pageCount = Math.ceil(totalCount / $("#page_size").val());
					$("#page_count").val(pageCount);
					$("#total-page").text(pageCount);
					
					$("#yema").empty();
					for(var i = 1; i <= pageCount ; i++) {
						if(i != $("#current-page").text()) {
							$("#yema").append('<option value="'+i+'">第'+i+'页</option>');
						} else {
							$("#yema").append('<option value="'+i+'" selected>第'+i+'页</option>');
						}
						
					}
				}
				for ( var o in list) {
					var product = list[o];
					/*
					var html = '';
					html += '<div class = "div-product" onclick="location.href=\'/mobile/introduce.html?product_id='+product.id+'\'">';
					html += '<div class = "div-image">';
					html += '<img class = "img-product" src='+product.image+' />';
					html += '</div>';
					if(catagory == null || catagory == 0) {
						html += '<div class = "div-name"><p class="p-name">['+product.category+'] '+product.name+'</p>';
					} else {
						html += '<div class = "div-name"><p class="p-name">'+product.name+'</p>';
					}
					html += '<p class="p-description">'+product.description+'</p></div>';
					html += '</div>';
					*/
					var html = '';
					html += '<li>';
					html += '<a href="/mobile/introduce.html?product_id='+product.id+'" class="lis-list-a">';
					html += '<dl class="clearfix">';
					html += '<dd><img src="'+product.image+'" width="60" height="90"/></dd>';
					html += '<dt>';
					html += '<p class="name">'+product.brand+'</p>';
					html += '<p class="info"><span>'+product.name+'</span>&nbsp;'+product.description+'</p>';
					html += '</dt>';
					html += '</dl>';
					html += '</a>';
					html += '</li>';
					$product_list.append(html);
				} 
			});
		}
		
		
		/*
		function toCatagory(id, name) {
			$("#span-category").text(name);
				var category_id = $("#input-category").val();
				$("#category-"+category_id).removeClass("menu2");
				$("#category-"+category_id).addClass("menu3");
				$("#input-category").val(id);
				$("#category-"+id).removeClass("menu3");
				$("#category-"+id).addClass("menu2");
				selectProduct();
		}
		
		
		function toBrand(id, name) {
			$("#span-brand").text(name);
				var brand_id = $("#input-brand").val();
				$("#brand-"+brand_id).removeClass("menu2");
				$("#brand-"+brand_id).addClass("menu3");
				$("#input-brand").val(id);
				$("#brand-"+id).removeClass("menu3");
				$("#brand-"+id).addClass("menu2");
				selectProduct();
		}
		
		
		function showCategory() {
			if($(".div-brand").css("display") == 'block') {
				$(".div-brand").toggle('fast', function() {
					$(".div-category").toggle('fast');
				});
			} else {
				$(".div-category").toggle('fast');
			}
		}
		
		function showBrand() {
			if($(".div-category").css("display") == 'block') {
				$(".div-category").toggle('fast', function() {
					$(".div-brand").toggle('fast');
				});
			} else {
				$(".div-brand").toggle('fast');
			}
		}
		*/
		
		function changeCategory(obj) {
			var category = $("#select-category").val();
			var category1 = $("#input-category").val();
			if(category == category1) {
				return;
			} else {
				$("#input-category").val(category);
				$("#current-category").text(obj.options[obj.selectedIndex].text);
				//$("#current-category").removeClass("select-tip");
				$("#key_word").val('');
			}
			selectProduct();
		}
		
		function changeBrand(obj) {
			var brand = $("#select-brand").val();
			var brand1 = $("#input-brand").val();
			if(brand == brand1) {
				return;
			} else {
				$("#input-brand").val(brand);
				$("#current-brand").text(obj.options[obj.selectedIndex].text);
				//$("#current-brand").removeClass("select-tip");
				$("#key_word").val('');
			}
			selectProduct();
		}
		
		function selectProduct() {
			$("#page_no").val(0);
			$("#page_count").val(-1);
			$("#current-page").text(1);
			getProductByPage();
		}
		
		function selectProductByPage() {
			var current_page = $("#yema").val();
			$("#current-page").text(current_page);
			$("#page_no").val(current_page);
			getProductByPage();
		}
		
		function prevPage() {
			var current_page = parseInt($("#yema").val());
			if(current_page > 1) {
				current_page = current_page -  1;
			} else {
				return;
			}
			$("#current-page").text(current_page);
			$("#page_no").val(current_page);
			getProductByPage();
		}
		
		function nextPage() {
			var page_count = parseInt($("#page_count").val()); 
			if(page_count <= 0) {
				return;
			}
			
			var current_page = parseInt($("#yema").val());
			if(current_page < page_count) {
				current_page = current_page +  1;
			} else {
				return;
			}
			$("#current-page").text(current_page);
			$("#page_no").val(current_page);
			getProductByPage();
		}
		
		function toggleSearchDialog() {
			$(".div-search-dialog").toggle("fast", function() {
				$(".search-icon").toggle();
			});
		}
		
		function searchProductByKeyWord() {
			toggleSearchDialog();
			$("#key_word").val($("#input").val());
			$("#input").val("");
			selectProduct();
		}
		
	</script>	
</html>
